<template>
  <div class="payment-dialog">
    <!-- 支付弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :width="isMobile ? '90%' : '400px'"
      center
      :close-on-click-modal="false"
      :before-close="handleClose"
      class="payment-dialog-container"
    >
      <div class="payment-content">
        <!-- 套餐信息 -->
        <div class="package-info">
          <div class="package-name">{{ packageInfo.name }}</div>
          <div class="package-price">¥ {{ packageInfo.price }}</div>
        </div>
        
        <!-- 支付方式选择 -->
        <div class="payment-methods">
          <div class="method-title">请选择支付方式</div>
          <div class="method-options">
            <!-- 支付宝：仅在非微信浏览器中显示 -->
            <div 
              :class="['method-option', selectedPayType === 'alipay' ? 'active' : '']" 
              @click="selectPayType('alipay')"
              v-if="!isWechat"
            >
              <div class="method-icon alipay-icon">
                <span class="payment-icon">&#65504;</span>
              </div>
              <span class="method-name">支付宝</span>
              <el-icon v-if="selectedPayType === 'alipay'" class="check-icon"><Check /></el-icon>
            </div>
            <!-- 微信支付：仅在微信浏览器中显示 -->
            <div 
              :class="['method-option', selectedPayType === 'wechat' ? 'active' : '']" 
              @click="selectPayType('wechat')"
              v-if="isWechat"
            >
              <div class="method-icon wechat-icon">
                <span class="payment-icon">W</span>
              </div>
              <span class="method-name">微信支付</span>
              <el-icon v-if="selectedPayType === 'wechat'" class="check-icon"><Check /></el-icon>
            </div>
            <!-- PayPal：仅在非微信浏览器中显示 -->
            <div 
              :class="['method-option', selectedPayType === 'paypal' ? 'active' : '']" 
              @click="selectPayType('paypal')"
              v-if="!isWechat"
            >
              <div class="method-icon paypal-icon">
                <span class="payment-icon">P</span>
              </div>
              <span class="method-name">PayPal</span>
              <el-icon v-if="selectedPayType === 'paypal'" class="check-icon"><Check /></el-icon>
            </div>
          </div>
        </div>
        
        <!-- 支付状态提示 -->
        <div v-if="paymentStatus.message" :class="['payment-status', paymentStatus.success ? 'success' : 'error']">
          <el-icon v-if="paymentStatus.success"><Check /></el-icon>
          <el-icon v-else><Close /></el-icon>
          <span>{{ paymentStatus.message }}</span>
        </div>
        
        <!-- 支付表单容器 - 用于直接渲染支付表单 -->
        <div v-if="paymentFormHtml" class="payment-form-container">
          <p>{{ paymentInstructions }}</p>
        </div>
        
        <!-- 微信扫码支付容器 -->
        <div v-if="qrCodeUrl" class="qrcode-container">
          <p>请使用微信扫描二维码完成支付</p>
          <img :src="qrCodeUrl" alt="微信支付二维码" class="qrcode-image" />
          <p class="qrcode-tips">付款完成后请勿关闭页面，系统会自动处理</p>
        </div>
        
        <!-- PayPal支付容器 -->
        <div v-if="paypalButtonContainer" class="paypal-container">
          <p>点击下方按钮完成PayPal支付</p>
          <div ref="paypalButtonRef" class="paypal-button-container"></div>
        </div>
        
        <!-- 支付跳转按钮 - 仅在PC端且有支付链接时显示 -->
        <div v-if="paymentRedirectUrl && !isMobile" class="redirect-container">
          <p>点击下方按钮前往支付页面</p>
          <el-button type="primary" @click="redirectToPayment">立即支付</el-button>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitToPayment" :loading="loading" :disabled="!selectedPayType">
            {{ loading ? '处理中...' : '确认支付' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 加载提示 -->
    <div v-if="loading && !dialogVisible" class="loading-overlay">
      <div class="loading-spinner">
        <el-icon><Loading /></el-icon>
        <span>{{ loadingText }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount, nextTick } from 'vue';
import { Check, Close, Loading } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { rechargePackage, checkOrderStatus, paypalCapture } from '@/api/chat';

// 微信JS-SDK配置
let wx = null;
if (typeof window !== 'undefined') {
  // 动态导入微信JSSDK
  import('weixin-js-sdk').then(module => {
    wx = module.default;
  }).catch(err => {
    console.error('加载微信JSSDK失败:', err);
  });
}

// 组件属性定义
const props = defineProps({
  title: {
    type: String,
    default: '选择支付方式'
  },
  packageInfo: {
    type: Object,
    default: () => ({ type: '', name: '默认套餐', price: 0 })
  },
  defaultPayType: {
    type: String,
    default: 'alipay' // 默认支付宝支付
  }
});

// 组件事件
const emit = defineEmits(['success', 'cancel', 'error', 'close']);



// 组件状态
const dialogVisible = ref(false);
const loading = ref(false);
const loadingText = ref('正在处理支付请求...');
const paymentStatus = ref({ success: false, message: '' });
const paymentFormHtml = ref('');
const orderSn = ref('');
const selectedPayType = ref(null); // 默认不选中支付方式，需用户主动选择
const qrCodeUrl = ref(''); // 微信支付二维码URL
const paymentRedirectUrl = ref(''); // 支付跳转地址
const paymentInstructions = ref(''); // 支付提示信息
const paypalButtonContainer = ref(false); // PayPal按钮容器显示状态
const paypalButtonRef = ref(null); // PayPal按钮DOM引用

// 检测是否为移动设备
const isMobile = computed(() => {
  // 使用 UserAgent 检测移动设备
  const userAgent = navigator.userAgent.toLowerCase();
  const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod', 'windows phone', 'mobile'];
  const isMobileDevice = mobileKeywords.some(keyword => userAgent.includes(keyword));
  
  // 结合屏幕宽度检测
  const isSmallScreen = window.innerWidth <= 768;
  
  return isMobileDevice || isSmallScreen;
});

const isWechat = computed(() => /MicroMessenger/i.test(navigator.userAgent));

// 轮询相关变量
const orderTimer = ref(null);
const MAX_CHECK_TIMES = 20;
const checkTimes = ref(0);

// 预加载的支付数据
// const preloadedPaymentData = ref(null);

// 选择支付方式
const selectPayType = (payType) => {
  selectedPayType.value = payType;
  // 清空已生成的支付相关内容
  paymentFormHtml.value = '';
  qrCodeUrl.value = '';
  paymentRedirectUrl.value = '';
  paymentInstructions.value = '';
  paypalButtonContainer.value = false;
  
  // 切换支付方式后重新加载支付信息
  if (props.packageInfo && props.packageInfo.type && props.packageInfo.price > 0) {
    preloadPaymentInfo();
  }
};

// 打开支付弹窗
const showPayment = () => {
  dialogVisible.value = true;
  // 重置状态
  paymentStatus.value = { success: false, message: '' };
  paymentFormHtml.value = '';
  qrCodeUrl.value = '';
  paymentRedirectUrl.value = '';
  paymentInstructions.value = '请先选择支付方式';
  paypalButtonContainer.value = false;
  orderSn.value = '';
  checkTimes.value = 0;
  selectedPayType.value = null; // 重置支付方式选择
  // 停止之前可能存在的订单检查
  stopOrderCheck();
};

// 跳转到支付页面
const redirectToPayment = () => {
  if (paymentRedirectUrl.value) {
    window.location.href = paymentRedirectUrl.value;
    // 跳转后开始轮询订单状态
    startCheckOrderStatus(orderSn.value);
  }
};

// 跳转到支付页面或提交表单的通用函数
const submitToPayment = () => {
  // 先检查是否有直接跳转链接
  if (paymentRedirectUrl.value) {
    window.location.href = paymentRedirectUrl.value;
    // 跳转后开始轮询订单状态
    startCheckOrderStatus(orderSn.value);
    return;
  }
  
  // 如果没有直接链接，尝试提交表单
  if (paymentFormHtml.value) {
    // 先尝试在已渲染DOM中查找表单
    const form = document.querySelector('.payment-form-container form');
    if (form) {
      form.submit(); // 直接提交表单，页面会跳转
      // 开始轮询订单状态
      startCheckOrderStatus(orderSn.value);
      return;
    }
    
    // 创建临时DOM元素提交表单
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = paymentFormHtml.value;
    const tempForm = tempDiv.querySelector('form');
    
    if (tempForm) {
      document.body.appendChild(tempForm);
      tempForm.submit();
      // 开始轮询订单状态
      startCheckOrderStatus(orderSn.value);
    } else {
      ElMessage.error('支付表单解析失败，请重试');
    }
  }
};

// 关闭弹窗
const handleClose = () => {
  stopOrderCheck();
  dialogVisible.value = false;
  emit('close');
};

// 预加载支付信息
const preloadPaymentInfo = async () => {
  try {
    if (loading.value) return;
    loading.value = true;
    loadingText.value = '正在准备支付...';
    
    // 获取设备类型，用于后端判断使用何种支付方式
    const detectedMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // 创建订单并获取支付信息
    const params = {
      combo_type: props.packageInfo.type,
      amount: props.packageInfo.price,
      pay_type: selectedPayType.value, // 用户选择的支付方式
      device_type: detectedMobile ? 'mobile' : 'pc', // 明确指定设备类型
      //当前网页url
      return_url: window.location.href,
    };
    
    console.log('PayPal支付请求参数:', params);
    
    const res = await rechargePackage(params);
    
    console.log('PayPal支付响应:', res);
    
    if (res.code === 0 && res.data) {
      // 处理支付信息
      processPaymentResponse(res);
      loading.value = false;
    } else {
      ElMessage.error(res.msg || '准备支付信息失败');
      console.error('PayPal支付失败:', res);
      loading.value = false;
    }
  } catch (error) {
    console.error('预加载支付信息错误:', error);
    ElMessage.error('网络请求失败: ' + error.message);
    loading.value = false;
  }
};

// 确认支付
// const confirmPayment = async () => {
//   if (loading.value) return;
//   loading.value = true;
  
//   // 如果已经有预加载的支付数据，直接使用
//   if (preloadedPaymentData.value) {
//     processPaymentResponse(preloadedPaymentData.value, true);
//     return;
//   }
  
//   // 如果已经有支付跳转URL，直接跳转
//   if (paymentRedirectUrl.value) {
//     window.location.href = paymentRedirectUrl.value;
//     return;
//   }
  
//   // 自动提交表单
//   if (paymentFormHtml.value && isMobile.value) {
//     submitPaymentForm();
//     return;
//   }
  
//   // 没有预加载信息，重新请求
//   try {
//     loading.value = true;
//     loadingText.value = '正在创建订单...';
    
//     // 获取设备类型，用于后端判断使用何种支付方式
//     const detectedMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
//     // 创建订单并获取支付信息
//     const params = {
//       combo_type: props.packageInfo.type,
//       amount: props.packageInfo.price,
//       pay_type: selectedPayType.value, // 用户选择的支付方式
//       device_type: detectedMobile ? 'mobile' : 'pc' // 明确指定设备类型
//     };
    
//     const res = await rechargePackage(params);
    
//     if (res.code === 0 && res.data) {
//       // 处理支付信息并自动跳转(移动端)
//       processPaymentResponse(res, true);
//     } else {
//       ElMessage.error(res.msg || '创建订单失败，请重试');
//       loading.value = false;
//     }
//   } catch (error) {
//     console.error('支付处理错误:', error);
//     ElMessage.error('支付处理出错，请重试');
//     loading.value = false;
//   }
// };

// 处理支付响应的通用函数
const processPaymentResponse = (res) => {
  // 保存订单号，用于后续查询
  if (res.data.order_sn) {
    orderSn.value = res.data.order_sn;
  }
  
  // 清空所有支付相关内容
  paymentFormHtml.value = '';
  qrCodeUrl.value = '';
  paymentRedirectUrl.value = '';
  paypalButtonContainer.value = false;
  
  // === 支付宝处理 ===
  if (selectedPayType.value === 'alipay' && res.data.form) {
    // 设置支付宝表单HTML
    paymentFormHtml.value = res.data.form;
    
    if (isMobile.value) {
      // 移动端支付宝处理
      paymentInstructions.value = '正在准备支付宝付款页面...';
      
      // 移动端支付宝处理，直接从返回的表单中提取跳转 URL
      // wapPay 返回的是一个包含完整跳转链接的HTML
      console.log('移动端表单:', paymentFormHtml.value);
      
      // 直接提取URL
      setTimeout(() => {
        // 首先查找表单中完整的URL
        let directUrlMatch = paymentFormHtml.value.match(/https?:\/\/[^\s'"><]+alipay[^\s'"><]*/i);
        if (directUrlMatch && directUrlMatch[0]) {
          // 直接找到完整URL
          paymentRedirectUrl.value = directUrlMatch[0];
          paymentInstructions.value = '已找到支付链接，点击确认支付按钮进行支付';
        } else {
          // 如果没有直接找到URL，尝试解析表单获取URL
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = paymentFormHtml.value;
          const tempForm = tempDiv.querySelector('form');
          
          if (tempForm && tempForm.getAttribute('action')) {
            // 获取表单action作为跳转URL
            paymentRedirectUrl.value = tempForm.getAttribute('action');
            
            // 提取表单中的所有输入字段，构建查询参数
            const formInputs = tempForm.querySelectorAll('input[type="hidden"]');
            if (formInputs && formInputs.length > 0) {
              const params = new URLSearchParams();
              formInputs.forEach(input => {
                if (input.name && input.value) {
                  params.append(input.name, input.value);
                }
              });
              
              // 如果有参数且URL中不包含问号，添加参数到URL
              const paramsString = params.toString();
              if (paramsString && !paymentRedirectUrl.value.includes('?')) {
                paymentRedirectUrl.value += '?' + paramsString;
              }
            }
            
            paymentInstructions.value = '已解析支付链接，点击确认支付按钮进行支付';
          } else {
            // 如果还是没找到，尝试其他正则解析
            let formMatch = paymentFormHtml.value.match(/action=['"](.+?)['"](?:\s|\/|>)/i);
            if (formMatch && formMatch[1]) {
              paymentRedirectUrl.value = formMatch[1];
              paymentInstructions.value = '已解析支付链接，点击确认支付按钮进行支付';
            } else {
              ElMessage.error('支付表单解析失败，请重试');
              console.error('支付宝表单解析失败:', paymentFormHtml.value);
            }
          }
        }
      }, 300);
    } else {
      // PC端支付宝处理
      paymentInstructions.value = '请在下方完成支付操作';
      
      // 注意：PC端支付宝在页面内直接显示表单，不自动跳转
      // 这里可以添加一些样式调整，确保表单正确显示
      // setTimeout(() => {
      //   // 找到表单并应用样式
      //   const formEl = formContainer.value?.querySelector('form');
      //   if (formEl) {
      //     formEl.style.display = 'block';
      //     formEl.style.width = '100%';
      //     formEl.style.textAlign = 'center';
          
      //     // 查找表单中的按钮并应用样式
      //     const buttons = formEl.querySelectorAll('input[type="submit"], button');
      //     console.log(buttons, '有几个button');
      //     if (buttons.length > 0) {
      //       buttons.forEach(btn => {
      //         btn.style.display = 'inline-block';
      //         btn.style.padding = '10px 20px';
      //         btn.style.background = '#1677ff';
      //         btn.style.color = 'white';
      //         btn.style.border = 'none';
      //         btn.style.borderRadius = '4px';
      //         btn.style.cursor = 'pointer';
      //         btn.style.fontSize = '14px';
      //         btn.style.margin = '10px auto';
      //         btn.value = '确认支付'
      //       });
      //     }
          
      //     // 开始轮询订单状态
      //     startCheckOrderStatus(orderSn.value);
      //   } else {
      //     ElMessage.error('支付表单加载失败，请重试');
      //   }
      // }, 500);
    }
  } 
  // === 微信支付处理 ===
  else if (selectedPayType.value === 'wechat') {
    const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
    
    // 只在微信浏览器中支持JSAPI支付
    if (isWechatBrowser && res.data.signType === 'MD5') {
      // 微信内JSAPI支付
      paymentInstructions.value = '正在调用微信支付...';
      // 确保wx对象已加载
      if (wx) {
        const jsapiParams = res.data;
        console.log('JSAPI支付参数:', jsapiParams);
        
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: 'wxb05325fedb08c337', // 必填，公众号的唯一标识
          timestamp: jsapiParams.timeStamp, // 必填，生成签名的时间戳
          nonceStr: jsapiParams.nonceStr, // 必填，生成签名的随机串
          signature: jsapiParams.paySign,// 必填，签名
          jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
        // 调用微信支付
        wx.chooseWXPay({
          timestamp: jsapiParams.timeStamp, // 支付签名时间戳
          nonceStr: jsapiParams.nonceStr, // 支付签名随机串
          package: jsapiParams.package, // 统一支付接口返回的prepay_id参数值
          signType: jsapiParams.signType, // 签名方式
          paySign: jsapiParams.paySign, // 支付签名
          success: function(/* res */) {
            // 支付成功后的回调函数
            ElMessage.success('支付成功');
            // 开始轮询订单状态
            startCheckOrderStatus(orderSn.value);
          },
          fail: function(result) {
            ElMessage.error('支付失败: ' + JSON.stringify(result));
            console.error('微信支付失败:', result);
          },
          cancel: function(/* res */) {
            ElMessage.info('取消支付');
          }
        });
      } else {
        ElMessage.error('微信JSSDK加载失败，请刷新页面重试');
        console.error('wx对象未加载');
      }
    } else {
      ElMessage.error('获取微信支付信息失败，请重试');
      console.error('无法识别的微信支付类型:', res.data);
    }
  } 
  // === PayPal支付处理 ===
  else if (selectedPayType.value === 'paypal') {
    if (res.data && (res.data.paypal_order_id || (res.data.type === 'paypal' && res.data.paypal_order_id))) {
      paymentInstructions.value = '正在初始化PayPal支付...';
      // 显示PayPal按钮容器
      paypalButtonContainer.value = true;
      
      // 获取PayPal订单ID
      const paypalOrderId = res.data.paypal_order_id;
      
      // 等待DOM更新后初始化PayPal按钮
      nextTick(() => {
        initPayPalButton(paypalOrderId);
      });
    } else {
      ElMessage.error('PayPal支付初始化失败: ' + (res.msg || '未知错误'));
      console.error('PayPal初始化失败，返回数据:', res);
    }
  } else {
    ElMessage.error('不支持的支付方式');
  }
  
  loading.value = false;
};

// 开始轮询订单状态
const startCheckOrderStatus = (orderNumber) => {
  // 先停止可能存在的定时器
  stopOrderCheck();
  
  // 创建新的定时器，每3秒检查一次订单状态
  orderTimer.value = setInterval(async () => {
    try {
      checkTimes.value++;
      
      if (checkTimes.value > MAX_CHECK_TIMES) {
        stopOrderCheck();
        paymentStatus.value = { 
          success: false, 
          message: '订单支付状态查询超时，请刷新页面重试或联系客服' 
        };
        return;
      }
      
      const result = await checkOrderStatus({ order_sn: orderNumber });
      
      if (result && result.code === 0) {
        // 支付成功
        if (result.data && result.data.pay_status === 1) {
          stopOrderCheck();
          paymentStatus.value = { 
            success: true, 
            message: '支付成功！' 
          };
          loading.value = false;
          
          // 通知父组件支付成功
          emit('success', { 
            orderSn: orderNumber, 
            packageInfo: props.packageInfo,
            payType: selectedPayType.value
          });
          
          // 3秒后关闭弹窗
          setTimeout(() => {
            handleClose();
          }, 3000);
        }
      }
    } catch (error) {
      console.error('查询订单状态错误:', error);
    }
  }, 3000);
};

// 停止订单检查
const stopOrderCheck = () => {
  if (orderTimer.value) {
    clearInterval(orderTimer.value);
    orderTimer.value = null;
  }
};

// 初始化PayPal按钮
const initPayPalButton = (orderId) => {
  if (!paypalButtonRef.value) {
    console.error('PayPal按钮容器未找到');
    return;
  }

  // 清空之前的按钮
  paypalButtonRef.value.innerHTML = '';

  // 动态加载PayPal SDK
  if (!window.paypal) {
    const script = document.createElement('script');
    // 使用你配置的PayPal客户端ID
    script.src = 'https://www.paypal.com/sdk/js?client-id=AVhC5oPovIlGGN0ekMP_bfZkryhIruqRXNcAX7pMDEi7crofeUiNiuMv5rU3kdB1iQunNKOJmHKwc5Do&components=buttons';
    script.onload = () => {
      renderPayPalButton(orderId);
    };
    script.onerror = () => {
      ElMessage.error('PayPal SDK加载失败');
    };
    document.head.appendChild(script);
  } else {
    renderPayPalButton(orderId);
  }
};

// 渲染PayPal按钮
const renderPayPalButton = (orderId) => {
  window.paypal.Buttons({
    createOrder: () => {
      return orderId;
    },
    onApprove: async (data) => {
      try {
        loading.value = true;
        loadingText.value = '正在处理PayPal支付...';
        
        // 调用后端验证支付
        const response = await paypalCapture({
          order_id: data.orderID,
          order_sn: orderSn.value
        });
        
        if (response.code === 0) {
          paymentStatus.value = { 
            success: true, 
            message: 'PayPal支付成功！' 
          };
          
          // 通知父组件支付成功
          emit('success', { 
            orderSn: orderSn.value, 
            packageInfo: props.packageInfo,
            payType: 'paypal'
          });
          
          // 3秒后关闭弹窗
          setTimeout(() => {
            handleClose();
          }, 3000);
        } else {
          ElMessage.error(response.msg || 'PayPal支付验证失败');
        }
        
        loading.value = false;
      } catch (error) {
        console.error('PayPal支付处理错误:', error);
        ElMessage.error('PayPal支付处理失败');
        loading.value = false;
      }
    },
    onError: (err) => {
      console.error('PayPal支付错误:', err);
      ElMessage.error('PayPal支付出现错误');
    },
    onCancel: () => {
      ElMessage.info('PayPal支付已取消');
    }
  }).render(paypalButtonRef.value);
  
  paymentInstructions.value = '请点击PayPal按钮完成支付';
};

// 在组件卸载前清除定时器
onBeforeUnmount(() => {
  stopOrderCheck();
});

// 暴露组件方法
defineExpose({
  showPayment
});
</script>

<style scoped>
.payment-dialog-container :deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

.payment-dialog-container :deep(.el-dialog__header) {
  padding: 15px 20px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.payment-dialog-container :deep(.el-dialog__body) {
  padding: 20px;
}

.payment-dialog .payment-content {
  padding: 10px 0;
}

.payment-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.package-info {
  text-align: center;
  margin-bottom: 20px;
}

.package-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.package-price {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.payment-methods {
  width: 100%;
  margin: 20px 0;
}

.method-title {
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
  color: #606266;
}

.method-options {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .method-options {
    flex-direction: column;
    gap: 15px;
  }
}

.method-option {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

@media screen and (max-width: 768px) {
  .method-option {
    padding: 12px;
  }
}

.method-option.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.method-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 24px;
}

.alipay-icon {
  background-color: #1677ff;
  color: white;
}

.wechat-icon {
  background-color: #09bb07;
  color: white;
}

.paypal-icon {
  background-color: #0070ba;
  color: white;
}

.payment-icon {
  line-height: 1;
}

.method-name {
  font-size: 14px;
  color: #606266;
}

.check-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #409eff;
  font-size: 16px;
}

.payment-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 4px;
  margin: 15px 0;
  width: 100%;
}

.payment-status.success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.payment-status.error {
  background-color: #fef0f0;
  color: #f56c6c;
}

.payment-status .el-icon {
  margin-right: 5px;
  font-size: 18px;
}

.payment-form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
}

.payment-form-container p {
  margin-bottom: 15px;
  color: #606266;
}

.payment-button-container {
  width: 100%;
}

.payment-button-container :deep(button),
.payment-button-container :deep(input[type="submit"]) {
  width: 100%;
  padding: 10px;
  background-color: #1677ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.payment-button-container :deep(button[type="submit"].wechat),
.payment-button-container :deep(input[type="submit"].wechat) {
  background-color: #09bb07;
}

.paypal-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
}

.paypal-container p {
  margin-bottom: 15px;
  color: #606266;
}

.paypal-button-container {
  width: 100%;
  max-width: 300px;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.loading-spinner {
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner .el-icon {
  font-size: 24px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
  .package-name {
    font-size: 16px;
  }
  
  .package-price {
    font-size: 20px;
  }
  
  .method-options {
    flex-direction: column;
  }
}
</style>
